<template>
  <div class="vant-table">
    <table cellspacing="0" :style="bgcolor" style="width: 100%" class="table">
      <tr>
        <th class="th" v-for="(item, index) in option.columns" :key="index">
          {{ item.label }}
        </th>
      </tr>
      <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
        <td v-for="(context, i) in option.columns" :key="i">
          {{ item[context.prop] }}
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
  name: "VantTable",
  props: {
    // bgcolor: Object,
    tableData: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => {
        return {
          isBorder: true,
          columns: () => [],
        }
      },
    },
    styleObj: {
      type: Object,
      default: () => {
        return {
          bgColor: "",
          headerBgColor: "",
          borderColor: "",
        }
      },
    },
  },
  created() {},
}
</script>

<style lang="less" scoped>
.vant-table {
  .table {
    border-radius: 0.185185rem;
    .th {
      height: 1.074074rem;
      line-height: 1.074074rem;
      // background-color: #393943;
      text-align: center;
      border-top-left-radius: 0.185185rem;
      border-top-right-radius: 0.185185rem;
    }
    .list-tr {
      height: 1.074074rem;
      line-height: 1.074074rem;
    }
    .list-tr:nth-child(2n) {
      // background-color: #33333b;
    }
  }
}
</style>
